<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		* { margin:0; padding:0; }
		body { font-size:12px; padding:50px; }
		a { text-decoration:none; }
		ul,ol { list-style:none; }

		.menu { width:100px; }
		.menu li { position:relative; height:20px; line-height:20px;
			padding-bottom:1px; float:left;  }
		.menu a {  float:left; width:90px; height:20px; line-height:20px; background:#eee;
			 padding-left:10px;  }
		.menu a:hover { background:#f1f1f1; }
		.sub-menu { display:none; position:absolute; left:100px; top:0; }
		.currMenu a { background:#000; color:#fff; }
	</style>
</head>
<body>
	<div class="menus" id="menu1">
		<ul class="menu">
			<li>
				<a href="javascript:;">menu1 »</a>
				<ul class="sub-menu">
					<li>
						<a href="#">sub-menu1</a>
					</li>
					<li>
						<a href="#">sub-menu2</a>
					</li>
					<li>
						<a href="#">sub-menu3 »</a>
						<ul class="sub-menu">
							<li>
								<a href="#">sub-menu1</a>
							</li>
							<li>
								<a href="#">sub-menu2</a>
							</li>
							<li>
								<a href="#">sub-menu3</a>
							</li>
						</ul>
					</li>
				</ul>
			</li>
			<li>
				<a href="javascript:;">menu2</a>	
			</li>
			<li>
				<a href="javascript:;">menu3 »</a>
				<ul class="sub-menu">
					<li>
						<a href="#">sub-menu1</a>
					</li>
					<li>
						<a href="#">sub-menu2</a>
					</li>
					<li>
						<a href="#">sub-menu3 »</a>
						<ul class="sub-menu">
							<li>
								<a href="#">sub-menu1</a>
							</li>
							<li>
								<a href="#">sub-menu2 »</a>
								<ul class="sub-menu">
									<li>
										<a href="#">sub-menu1</a>
									</li>
									<li>
										<a href="#">sub-menu2</a>
									</li>
									<li>
										<a href="#">sub-menu3</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="#">sub-menu3</a>
							</li>
						</ul>
					</li>
				</ul>
			</li>
			<li>
				<a href="javascript:;">menu4</a>	
			</li>
			<li>
				<a href="javascript:;">menu5</a>	
			</li>
			<li>
				<a href="javascript:;">menu6</a>	
			</li>
		</ul>
	</div>
	<script src="jquery.min.js" type="text/javascript"></script>
	<script src="jQuery.slide.menu.js" type="text/javascript"></script>
	<script type="text/javascript">
	//<![CDATA[
		$(function() {
				$("#menu1").slideMenu({
					effect: "fade"
				});
		});	
	//]]>	
	</script>
	
</body>
</html>
